Displaying higher-resolution images in a List View

So you have a list of image attachments, and you want to display these images inline into your SmartForm.

But if you use the out-of-the-box Image Attachment Control with a ListView, somehow it only displays a low-res thumbnail of your image, even after setting the image Size = Large or Original.

My findings:

(Lazy? Scroll all the way down for the solution.)

I have a simple Smartbox with a field (DataType = Image) to store my images:

I have a ListView to list out my images in a column. In the column>Properties>Body, I have set the Size to “Original” which in expectation should display the image in Original resolution.

Setting the Image Attachment Control‘s Size=Original works as expected in an ItemView (it shows the entire image in full-res), but then somehow K2’s ListView only displays images in tiny thumbnails. (Inconsistent behavior!)
I thought I could fix this in CSS, but after checking the img src of the thumbnails, it points to a teeny tiny image:

Interestingly, the URL of the img src looks like this:

…/Runtime/Runtime/File.ashx?_path=something.jpg&_filerequestdata=VNyzU…….&_height=32&_width=32&_controltype=image&X-K2-Token=

Where you could change the _height and _width parameters to change the compression of the image (specifically, this is the max-height and max-width, retaining the aspect ratio). It only downloads the resized image on the client-side, saving you load-time performance. Cool secret feature from K2, eh? 🙂
…Btw, removing the _height and _width parameters will let you download the full resolution of the image.

I also found that if you transfer the Image field’s value into a Data Label, this is gonna be how it looks like:

…/Runtime/Runtime/File.ashx?_path=something.jpg&_filerequestdata=VNyzU…….&_height=100&_width=100&_controltype=image&X-K2-Token=

So why not, instead of using the image attachment control, let’s create a new column (Data Label > set as Literal) with our new-found-HTML code, and replace the dimensions using expressions?

Solution:

1. Add a DataLabel control as a new column and remove the Image column.
   
2. In the DataLabel Properties > Body tab:
   Select Literal.
   Assign a new Expression.
   
3. Create your expression to replace “&_height=100&_width=100” with your desired max-width and max-height. In my case, it’s 200:
   After doing this, this is now how it looks like.
   
   Looks like we have to override some CSS styles.
4. Now we need to insert CSS scripts to override the default height and width for images within the list.
   You could do this by inserting a DataLabel as a Literal, or using my favorite HTML Literal custom control.

<style>
.theme-entry img.fileImage
{
height: auto !important;
width: auto !important;
}
</style>

Ta-da!

*btw, but this hack is not friendly for editable ListViews cos you’ll be presented with a DataLabel instead of an attachment control in your editable row. You would have to think of other workarounds for that scenario.